﻿@{
    ViewBag.Title = "FloorsAdd";
}

<link rel="stylesheet" type="text/css" href="~/Easy-UI/easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="~/Easy-UI/css/wu.css" />
<link rel="stylesheet" type="text/css" href="~/Easy-UI/css/icon.css" />
<script type="text/javascript" src="~/Easy-UI/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Easy-UI/easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Easy-UI/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IqB6H8XQ6lqKSnZMCY2wr2uaFjQI752Q"></script>

<style type="text/css">
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>



<div id="p" class="easyui-panel" title="建筑公共部分状况勘察"
     style="width:900px;height:auto;padding:10px;background:#fafafa;"
     data-options="iconCls:'icon-save',closable:true,
    collapsible:true,maximizable:true">

    <table style="margin:0 auto;">
        <tr id="td1">
            <th style="font-size:14px;">项目号：</th>
            <td><input class="easyui-textbox" data-options="prompt:'请输入...',validType:'txtname'" value="@ViewBag.id" disabled="disabled" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th style="font-size:14px;">所在楼号</th>
            <td><input class="easyui-textbox" data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>地图：</th>
            <td height="300px;" width="500px;">
                <div id="allmap"></div>
            </td>
            <td><a href="#" class="easyui-linkbutton" id="mapdd" plain="true" style="background:#fafafa;width:90px;height:24px;text-align:center">定位</a></td>
        </tr>
        <tr>
            <th>定位坐标：</th>
            <td><input class="easyui-textbox" id="floor_Landmark" name="floor_Landmark" disabled data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>定位地址：</th>
            <td><input class="easyui-textbox" id="floor_Address" disabled data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>房屋结构：</th>
            <td><input class="easyui-textbox" data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>建筑类型：</th>
            <td><input class="easyui-textbox" data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>外立面装饰：</th>
            <td><input class="easyui-textbox" data-options="prompt:'请输入...',validType:'txtname'" style="width:500px;height:24px"></td>
        </tr>
        <tr>
            <th>电梯：</th>
            <td align="left">
                <select class="easyui-combobox" id="city" onchange="sele()" style="width:500px;">
                    <option value="0">无电梯</option>
                    <option value="1">有电梯</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>供气：</th>
            <td>
                <select class="easyui-combobox" id="city" style="width:500px;">
                    <option value="1">管道燃气入户</option>
                    <option value="2">无管道燃气入户</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>供水：</th>
            <td>
                <select class="easyui-combobox" id="city" style="width:500px;">
                    <option value="1">市政供水</option>
                    <option value="2">无市政供水</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>供暖：</th>
            <td>
                <select class="easyui-combobox" id="city" style="width:500px;">
                    <option value="1">集中供暖</option>
                    <option value="2">分户供暖</option>
                    <option value="3">无供暖</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>门禁系统：</th>
            <td>
                <select class="easyui-combobox" id="city" style="width:500px;">
                    <option value="1">有门禁</option>
                    <option value="2">无门禁</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>其他：</th>
            <td style="text-align:left; width:500px;">
                <textarea cols="30"></textarea>
            </td>
        </tr>
        <tr style="text-align:center">
            <td colspan="2"><a href="#" class="easyui-linkbutton" iconcls="icon-add">保存</a></td>
        </tr>
    </table>
</div>

<script>
    function sele() {
        var state = $("#city").val();
        if (state == 1) {
            $("#city").after("<select class=\"easyui-combobox\" style=\"width:150px;\"><option value=\"0\">0</option><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option></select>")
        }
    }

    $(function () {
        $("#mapdd").click(function (e) {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                var mk = new BMap.Marker(r.point);
                $("#floor_Landmark").val(r.point.lng, r.point.lat);
            })
        })
    })
</script>

<script type="text/javascript">

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 11);
    map.addEventListener("click", function (e) {
        //alert('经度:' + e.point.lng + ' , 纬度: ' + e.point.lat);

        $("#floor_Landmark").val('经度:' + e.point.lng + ' , 纬度: ' + e.point.lat)

        var now_point = new BMap.Point(e.point.lng, e.point.lat);
        marker.setPosition(now_point);//设置覆盖物位置
    });
    var marker = new BMap.Marker(point); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    //拖拽结束事件
    marker.addEventListener("dragend", function (e) {
        //获取覆盖物位置
        var o_Point_now = marker.getPosition();
        var lng = o_Point_now.lng;
        var lat = o_Point_now.lat;
        //e.point.lng 地理经度。
        // e.point.lat 地理纬度。
        //alert(e.point.lng + "---, " + e.point.lat);
        get_lng_lat();
    })
    map.addOverlay(marker); //在地图中添加marker
    get_lng_lat();
    //获取经纬度
    function get_lng_lat() {
        //返回覆盖物标注的地理坐标。
        var o_Point_now = marker.getPosition();
        var lng = o_Point_now.lng;
        var lat = o_Point_now.lat;
        //alert('经度:' + lng + ' , 纬度: ' + lat);

        $("#floor_Landmark").val('经度:' + lng + ' , 纬度: ' + lat)

    }
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    function myFun(result) {
        var cityName = result.name;
        map.setCenter(cityName);
        $("#floor_Address").val(cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
</script>
